<template> 
    <div class="app-container">
      <el-card class="filter-container" shadow="never">
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
            <el-form-item label="帐号状态：">
              <el-button @click="changeStatus('NORMAL')" :class="{'activeBtn': statusBtn === 'NORMAL'}">正常</el-button>
              <el-button @click="changeStatus('BAN')" :class="{'activeBtn': statusBtn === 'BAN'}">封禁</el-button>
              <el-button @click="changeStatus('WITHDRAW')" :class="{'activeBtn': statusBtn === 'WITHDRAW'}">已注销</el-button>
            </el-form-item>
            <el-form-item label="搜索UID：">
              <el-input v-model="listQuery.id" class="input-width" placeholder="搜索UID" clearable></el-input>
            </el-form-item>
            <el-form-item label="搜索昵称：">
              <el-input v-model="listQuery.name" class="input-width" placeholder="搜索昵称" clearable></el-input>
            </el-form-item>
            <el-form-item label="搜索手机号：">
              <el-input v-model="listQuery.telephone" class="input-width" placeholder="手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="搜索邮箱：">
              <el-input v-model="listQuery.email" class="input-width" placeholder="搜索邮箱" clearable></el-input>
            </el-form-item>
            <el-form-item label="注册时间：">
              <el-form-item>
                <el-date-picker
                  v-model="loginTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-form-item>
            <el-form-item label="最近上线时间：">
              <el-form-item>
                <el-date-picker
                  v-model="lastTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
        <div style="display: flex;">
          <!-- <i class="el-icon-search"></i>
          <span>筛选搜索</span> -->
          <el-button
            style="float:right"
            type="primary"
            @click="handleSearchList()"
            size="small">
            查询搜索
          </el-button>
          <el-button
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small">
            重置
          </el-button>
        </div>
      </el-card>
      <el-card class="operate-container" shadow="never">
        <span></span>
        <span class="btn-list" @click="refBtn">刷新列表</span>
      </el-card>
      <div class="table-container">
        <el-table ref="adminTable"
                  :data="list"
                  style="width: 100%;"
                  v-loading="listLoading" border>
          <el-table-column label="UID" width="100" align="center">
            <template slot-scope="scope">
              <!-- {{scope.row.id}} -->
              <div v-html="hightLight(listQuery.id, scope.row.id)"></div>
            </template>
          </el-table-column>
          <el-table-column label="昵称" align="center">
            <template slot-scope="scope">
              <!-- {{scope.row.name}} -->
              <div v-html="hightLight(listQuery.name, scope.row.name)"></div>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" align="center">
            <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
          </el-table-column>
          <el-table-column label="最近上线时间" align="center">
            <template slot-scope="scope">{{scope.row.lastLoginTime | formatDateTime}}</template>
          </el-table-column>
          <el-table-column label="上线系统" width="160" align="center">
            <template slot-scope="scope">{{scope.row.onlineSystem}}</template>
          </el-table-column>
          <el-table-column label="IP所在地" width="160" align="center">
            <template slot-scope="scope">{{scope.row.ipRegion}}</template>
          </el-table-column>
          <el-table-column label="账号状态" width="140" align="center">
            <template slot-scope="scope">
              {{ showStatus(scope.row.userStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         @click="handleSelectRole(scope.$index, scope.row)">管理
              </el-button>
              <el-button size="mini"
                         type="text"
                         @click="handleUpdate(scope.$index, scope.row)">
                         查看更多
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :page-sizes="[10,15,20]"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog
        :title="'用户信息'"
        :visible.sync="dialogVisible"
        width="50%">
        <el-tabs v-model="activeUserName" type="card" @tab-click="handleClick">
          <el-tab-pane label="用户画像" name="first">
            <div class="user-info">
              <div style="width: 100px;">
                <span>UID: </span>
                <span>号：</span>
                <span>帐号状态：</span>
                <span>绑定手机号：</span>
                <span>绑定邮箱：</span>
                <span>注册时间：</span>
                <span>常用系统：</span>
                <span>常用设备：</span>
                <span>常用IP：</span>
              </div>
              <div style="width: 300px;">
                <span>{{ userInfo.id }}</span>
                <span>{{ userInfo.sysAccount }}</span>
                <span>{{ showStatus(userInfo.userStatus) }}</span>
                <span>{{ userInfo.telephone }}</span>
                <span>{{ userInfo.email }}</span>
                <span>{{ userInfo.createTime | formatDateTime }}</span>
                <span>{{ userInfo.onlineSystem === 'Android' ? '安卓' : 'IOS' }}</span>
                <span>{{ null }}</span>
                <span>{{ userInfo.ipRegion }}</span>
              </div>
              <div style="width: 100px;">
                <span>头像：</span>
                <span>昵称：</span>
                <span>性别：</span>
                <span>生日：</span>
                <span>设置币种：</span>
                <span>设置语言：</span>
              </div>
              <div>
                <img :src="userInfo.faceUrl" alt="" style="width: 40px; height: 40px;"/>
                <!-- <span>{{ userInfo.faceUrl }}</span> -->
                <span>{{ userInfo.name }}</span>
                <span>{{ userInfo.sex }}</span>
                <span>{{ userInfo.birthday }}</span>
                <span>{{ userInfo.currency }}</span>
                <span>{{ userInfo.lang }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="使用情况" name="second">
            <el-table ref="adminLoginTable"
                  :data="loginList"
                  style="width: 100%;"
                  v-loading="listLoading" border>
              <el-table-column label="上线时间" width="100" align="center">
                <template slot-scope="scope"></template>
              </el-table-column>
              <el-table-column label="下线时间" align="center">
                <template slot-scope="scope">{{scope.row.offlineTime | formatDateTime}}</template>
              </el-table-column>
              <el-table-column label="在线时间mins" align="center">
                <template slot-scope="scope">{{scope.row.onlineTime}}</template>
              </el-table-column>
              <el-table-column label="上线系统" align="center">
                <template slot-scope="scope"></template>
              </el-table-column>
              <el-table-column label="上线设备" align="center">
                <template slot-scope="scope">{{scope.row.deviceSystem}}</template>
              </el-table-column>
              <el-table-column label="IP所在地" align="center">
                <template slot-scope="scope">{{scope.row.ipRegion}}</template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeLogin"
                @current-change="handleCurrentLogin"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="loginQuery.pageNum"
                :page-size="loginQuery.pageSize"
                :page-sizes="[10,15,20]"
                :total="loginTotal">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="帐号情况" name="third">
            <el-table ref="adminLogTable"
                  :data="userListLog"
                  style="width: 100%;"
                  v-loading="listLoading" border>
              <el-table-column label="时间" width="100" align="center">
                <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
              </el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">{{showStatus(JSON.parse(scope.row.optPayload)['changed_status'])}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center">
                <template slot-scope="scope">{{scope.row.remark}}</template>
              </el-table-column>
              <el-table-column label="操作人" align="center">
                <template slot-scope="scope">{{scope.row.optUsername}}</template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeLog"
                @current-change="handleCurrentLog"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="logQuery.pageNum"
                :page-size="logQuery.pageSize"
                :page-sizes="[10,15,20]"
                :total="totalLog">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="消费情况" name="fourth">消费情况</el-tab-pane>
          <el-tab-pane label="其他分组" name="five">其他分组</el-tab-pane>
        </el-tabs>
      </el-dialog>
      <el-dialog
        title="管理"
        :visible.sync="allocDialogVisible"
        width="50%">
        <div v-if="choiceRow">{{ choiceRow.id }}   {{ choiceRow.name }}</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="管理用户" name="one">
            <el-form :model="userMainForm"
                 ref="userForm"
                 label-width="150px" size="small">
              <el-form-item label="特殊资源">
                <el-radio-group v-model="userMainForm.userStatus">
                  <el-radio label="NORMAL">正常</el-radio>
                  <el-radio label="BAN">封禁</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input v-model="userMainForm.remark"
                          type="textarea"
                          :rows="5"
                          style="width: 250px"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="账号情况" name="two">
            <el-table ref="adminLogTable"
                  :data="userListLog"
                  style="width: 100%;"
                  v-loading="listLoading" border>
              <el-table-column label="时间" width="100" align="center">
                <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
              </el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">{{showStatus(JSON.parse(scope.row.optPayload)['changed_status'])}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center">
                <template slot-scope="scope">{{scope.row.remark}}</template>
              </el-table-column>
              <el-table-column label="操作人" align="center">
                <template slot-scope="scope">{{scope.row.optUsername}}</template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeLog"
                @current-change="handleCurrentLog"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="logQuery.pageNum"
                :page-size="logQuery.pageSize"
                :page-sizes="[10,15,20]"
                :total="totalLog">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
        <span v-if="activeName === 'one'" slot="footer" class="dialog-footer">
              <el-button @click="allocDialogVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="handleAllocDialogConfirm('userForm')" size="small">确 定</el-button>
            </span>
      </el-dialog>
    </div>
  </template>
  <script>
    import { userList, userUpdate, userLog, userNumber, userLoginLog, fetchAllResourceList } from "@/api/app";
    import {formatDate} from '@/utils/date';

    const defaultListQuery = {
      pageNum: 1,
      pageSize: 10,
      id: null,
      sysAccount: null,
      name: null,
      telephone: null,
      email: null,
      registerStartTime: null,
      registerEndTime: null,
      lastLoginStartTime: null,
      lastLoginEndTime: null,
      userStatus: null,
    };
    const defaultAdmin = {
      id: null,
      username: null,
      password: null,
      nickName: null,
      email: null,
      note: null,
      status: 1
    };
    export default {
      name: 'userList',
      data() {
        return {
          listQuery: Object.assign({}, defaultListQuery),
          list: null,
          total: null,
          listLoading: false,
          dialogVisible: false,
          admin: Object.assign({}, defaultAdmin),
          isEdit: false,
          allocDialogVisible: false,
          statusBtn: null,
          loginTime: null,
          lastTime: null,
          activeName: 'one',
          userMainForm: {
            id: null,
            remark: null,
            userStatus: null
          },
          choiceRow: null,
          logQuery: {
            pageNum: 1,
            pageSize: 10,
            utId: null,
            optType: 1,
          },
          loginQuery: {
            pageNum: 1,
            pageSize: 10,
            utId: null,
            optType: 1,
          },
          totalLog: null,
          userListLog: [],
          activeUserName: 'first',
          userInfo: {
            "id": '',
            "sysAccount": '--',
            "userStatus": '--',
            "telephone": '--',
            "email": '--',
            "createTime": '--',
            "onlineSystem": '--',
            "ipRegion": '--',
            "faceUrl": '--',
            "name": '--',
            "sex": '--',
            "birthday": '--',
            "lastLoginTime": '--',
            "currency": '--',
            "lang": '--',
            "createTime": '--',
            "updateTime": '--'
          },
          loginList: null,
          loginTotal: 0,
          btnMenu: {
            edit: true,
            delete: true,
          },
        }
      },
      created() {
        const menu = JSON.parse(localStorage.getItem('listMenu'));
        const item = menu.filter(item => item.title === '注册用户列表')[0];
        fetchAllResourceList({menuId: item.id }).then(res => {
          res.data.forEach(dom => {
            if (dom.component === '' && dom.name === '后台角色管理') {
              this.btnMenu.edit = false;
            }
            if (dom.component === '' && dom.name === '后台角色删除') {
              this.btnMenu.delete = false;
            }
          });
        });
        this.getList();
      },
      filters: {
        formatDateTime(time) {
          if (time == null || time === '') {
            return '-';
          }
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }
      },
      methods: {
        hightLight (keyWord, suggtion) {
            // 使用 regexp 构造函数，因为这里要匹配的是一个变量
            let newSrt = null;
            const reg = new RegExp(keyWord, 'ig')
            if (keyWord && suggtion) {
                newSrt = String(suggtion).replace(reg, function (p) {
                    return '<span style="color: #409EFF">' + p + '</span>'
                })
            } else {
                newSrt = suggtion;
            }
            return newSrt
        },
        handleClick(tab, event) {
          // console.log(tab, event);
        },
        refBtn() {
          this.getList();
        },
        showStatus(type) {
          let word = null;
          switch(type) {
            case 'NORMAL':
              word = '正常';
              break;
            case 'BAN':
              word = '封禁';
              break;
            case 'WITHDRAW':
              word = '已注销';
              break;
            default: break;
          }
          return word;
        },
        changeStatus(type) {
          this.statusBtn = type;
          this.listQuery.userStatus = type;
        },
        handleResetSearch() {
          this.lastTime = null;
          this.loginTime = null;
          this.listQuery = Object.assign({}, defaultListQuery);
          this.getList();
        },
        handleSearchList() {
          if (this.loginTime) {
            this.listQuery.registerStartTime = this.loginTime[0];
            this.listQuery.registerEndTime = this.loginTime[1];
          } else {
            this.listQuery.registerStartTime = null;
            this.listQuery.registerEndTime = null;
          }
          if (this.lastTime) {
            this.listQuery.lastLoginStartTime = this.loginTime[0];
            this.listQuery.lastLoginEndTime = this.loginTime[1];
          } else {
            this.listQuery.lastLoginStartTime = null;
            this.listQuery.lastLoginEndTime = null;
          }
          this.listQuery.pageNum = 1;
          this.getList();
        },
        handleSizeChange(val) {
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val) {
          this.listQuery.pageNum = val;
          this.getList();
        },
        handleSizeLog(val) {
          this.logQuery.pageNum = 1;
          this.logQuery.pageSize = val;
          this.getLogList();
        },
        handleCurrentLog(val) {
          this.logQuery.pageNum = val;
          this.getLogList();
        },
        handleSizeLogin(val) {
          this.loginQuery.pageNum = 1;
          this.loginQuery.pageSize = val;
          this.getLoginList();
        },
        handleCurrentLogin(val) {
          this.loginQuery.pageNum = val;
          this.getLoginList();
        },
        handleAdd() {
          this.dialogVisible = true;
          this.isEdit = false;
          this.admin = Object.assign({},defaultAdmin);
        },

        handleUpdate(index, row) {
          this.activeUserName = 'first';
          this.dialogVisible = true;
          this.choiceRow = row;
          this.logQuery.utId = row.id;
          this.loginQuery.utId = row.id;
          this.getLogList();
          this.getLoginList();
          userNumber(row.id).then(res => {
            // console.log(res);
            this.userInfo = res.data;
          });
        },
        handleAllocDialogConfirm(){
          if (!this.userMainForm.userStatus) {
            this.$message({
              message: '请选择状态！',
              type: 'error'
            });
          } else if (!this.userMainForm.remark) {
            this.$message({
              message: '请填写备注！',
              type: 'error'
            });
          } else {
            userUpdate(this.userMainForm).then(response => {
                this.$message({
                  message: '设置成功！',
                  type: 'success'
                });
                this.allocDialogVisible = false;
                this.getList();
              })
          }
        },
        handleSelectRole(index,row){
          this.logQuery.utId = row.id;
          this.choiceRow = row;
          this.userMainForm.id = row.id;
          this.userMainForm.remark = null;
          this.userMainForm.userStatus = row.accountStatus;
          this.getLogList();
          this.activeName = 'one';
          this.allocDialogVisible = true;
        },
        getLoginList() {
          userLoginLog(this.loginQuery).then(res => {
            // console.log(res);
            this.loginList = res.data.records;
            this.loginTotal = res.data.total;
          });
        },
        getLogList() {
          userLog(this.logQuery).then(res => {
            this.userListLog = res.data.records;
            this.totalLog = res.data.total;
          })
        },
        getList() {
          this.listLoading = true;
          userList(this.listQuery).then(response => {
            // console.log(response)
            this.listLoading = false;
            this.list = response.data.records;
            this.total = response.data.total;
          });
        },

      }
    }
  </script>
<style lang="scss" scoped>
.activeBtn {
  background-color: green;
  color: #fff;
}
.btn-list {
    cursor: pointer;
}
.user-info {
  display: flex;
  padding: 0 40px;
  div {
    display: flex;
    flex-direction: column;
    span {
      margin: 10px 0;
      display: inline-block;
      height: 20px;
    }
  }
}
</style>


